<template>
  <view class="p-goods-info">
    <!--  普通订单  -->
    <view class="info">
      <view class="pic">
        <x-image :src="props.detail.skuImgUrl"/>
      </view>
      <view class="flex flex1" style="flex-direction: column">
        <view class="flex">
          <view class="content">
            <view class="goods-name">{{ props.detail.goodsName }}</view>
            <view class="spec">
              <text>套餐: {{ props.detail.specDetail }}</text>
            </view>
          </view>
          <view class="rt-price-num">
            <view class="price">
              <text class="font-20">¥</text>
              {{ props.detail.skuPrice }}
            </view>
            <view class="num">x{{ props.detail.buyNum }}</view>
          </view>
        </view>
        <view class="refund-status" v-if="props.detail.orderStatus === 2" style="text-align: left;margin-left: 18rpx">
          退款：¥{{ props.detail.actualPrice }}
        </view>
        <view class="refund-status">退款关闭</view>
        <view class="refund-status"
              v-if="props.detail.postSaleStatus === 2 || props.detail.postSaleStatus === 4 || props.detail.postSaleStatus === 5">
          退款中
        </view>
        <view class="refund-status" v-if="props.detail.postSaleStatus === 7">退款成功</view>
        <view class="refund-status" v-if="props.detail.closeStatus === 5">商家主动退款</view>
        <view class="refund-status" v-if="props.detail.postSaleStatus === 9">退款关闭 商家主动退款</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import XImage from '@/components/x-image.vue';

const props = defineProps({
  detail: {
    type: Object,
    default: () => {
    }
  }
})
</script>

<style lang="scss" scoped>
.p-goods-info {
  .info {
    background: #FFFFFF;
    display: flex;
    padding: 20rpx;

    .pic {
      width: 160rpx;
      height: 160rpx;
      border-radius: 6rpx;
      background: #FFE4E4;
      overflow: hidden;
    }

    .content {
      display: flex;
      flex-direction: column;
      flex: 1;
      margin-left: 16rpx;

      .goods-name {
        font-size: 30rpx;
        color: $uni-color-default;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .spec {
        margin-top: 8rpx;
        font-size: 26rpx;
        color: $uni-color-info;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }

    .refund-status {
      text-align: right;
      font-size: 24rpx;
      color: $uni-color-primary;
    }

    .rt-price-num {
      margin-left: 30rpx;
      text-align: right;

      .price {
        font-size: 30rpx;
        color: $uni-color-default;
      }

      .num {
        margin-top: 8rpx;
        font-size: 26rpx;
        color: $uni-color-info;
      }
    }
  }
}

.flex {
  display: flex;
}

.flex1 {
  flex: 1;
}
</style>
